<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key">
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="2">
			<Select  placeholder="请选择状态" clearable v-model="statusKey" :style="{marginLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="4">
			<Button type="primary" :style="{marginLeft:'30px'}" @click="search">搜索</Button>
		</Col>
		<Col span="12">
			<div style="text-align:right">
				<Button type="primary" icon="md-add" @click.native="link2create">新增</Button>
			</div>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table :loading="tableLoading" border stripe :columns="columns" :data="publisherData.data"></Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="publisherData.total" :page-size="publisherData.pageSize" :current.sync="publisherData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>

	<Modal v-model="showDetail" title="详情" cancel-text="">
		<div class="publisher-detail-wrapper">
			<Avatar :src="detail.avatar"  style="width:80px;height:80px" />
			<div class="cleaner10"></div>
			<p><label>姓名</label><span>{{detail.name}}</span></p>
			<p><label>代码</label><span>{{detail.code}}</span></p>
			<p><label>状态</label><span>{{detail.status}}</span></p>
			<p><label>权重</label><span>{{detail.sequence}}</span></p>
			<p><label>分类</label><span>{{detail.classify_name}}</span></p>
			<p><label>身价</label><span>{{detail.value}}</span></p>
			<p><label>国籍</label><span>{{detail.nation}}</span></p>
			<p><label>民族</label><span>{{detail.ethnic_group}}</span></p>
			<p><label>出生年月</label><span>{{detail.born_at}}</span></p>
			<p><label>职业</label><span>{{detail.occupation}}</span></p>
			<p><label>毕业院校</label><span>{{detail.colleage}}</span></p>
			<p><label>认证</label><span>{{authenticationStr(detail.authentication)}}</span></p>
		</div>
    </Modal>
</div>
</template>
<script>
// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
export default { 
	name:'publisher-index',
	components: {Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'发行人列表',
			tableLoading:true,
			publisherData:[],
			showDetail:false,
			detail:{},
			statusKey:'',
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '上架'},
				{value: 2,label: '下架'},
				{value: 3,label: '屏蔽'}
			],
			filterKey:'',
			key:'',
			keyList: [
				{value: 'name',label: '姓名'},
				{value: 'code',label: '代码'},
				{value: 'classify_name',label: '分类'},
				{value: 'value',label: '身价'},
				{value: 'nation',label: '国籍'},
				{value: 'ethnic_group',label: '民族'},
			],
			columns:[
				{title: '编号',key: 'id',width: 70,fixed: 'left'},
				{title: '姓名',key: 'name'},
				{title: '代码',key: 'code'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','上架','下架','屏蔽']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '分类',key: 'classify_name'},
				{title: '权重',key: 'sequence', sortable: true},
				{title: '身价(万)',key: 'value'},
				{title: '国籍',key: 'nation'},
				{title: '民族',key: 'ethnic_group'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:220,
					render: (h, params) => {
						return h('div', [
							h(Button, {
								props: {
									type: 'info',
									size: 'small',
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.detail=params.row
										this.showDetail=true
									}
								}
							}, '查看'),
							h(Button, {
								props: {
									type: 'success',
									size: 'small',
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {this.$router.push({path:'/timecoin/publisher/edit/'+params.row.id,query:{code:params.row.code}})}
								}
							}, '编辑'),
							h(Button, {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:1==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,1,params.index)}
								}
							}, '上架'),
							h(Button, {
								props: {
									type: 'warning',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:2==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,2,params.index)}
								}
							}, '下架'),
							h(Button, {
								props: {
									type: 'error',
									size: 'small'
								},
								style: {
									display:3==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,3,params.index)}
								}
							}, '屏蔽')
						]);
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$http.get("/v1/publishers",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.publisherData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/publishers",{params: { 'token': self.token, page:self.publisherData.page, pageSize: self.publisherData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.publisherData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Notice.info({title: error.message,desc:''});
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.publisherData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/publishers",{params: { 'token': self.token, page:1, pageSize: self.publisherData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.publisherData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Notice.info({title: error.message,desc:''});
				self.tableLoading=false
			})
		},
		changeMenu:function(){
			this.$store.dispatch('setMenuActive','0')
			this.$store.dispatch('setMenuOpen', ['0'])
			return false;
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/publishers?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.publisherData.data[index].status=statusId
					self.$Notice.success({title: '操作成功',desc:''});
				}else{
					
					self.$Notice.error({title: response.data.message,desc:''});
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Notice.error({title: error.message,desc:''});
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/publishers",{params: { 'token': self.token, page:1, pageSize: self.publisherData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.publisherData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Notice.info({title: error.message,desc:''});
				self.tableLoading=false
			})

		},
		authenticationStr:function(val){
			return String(val).replace(/[\[\]"]/g,"");
		},
		link2create:function(){this.$router.push({"name":"timecoin-publisher-create"})}
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	}
}



</script>
<style lang="less" scoped>
.publisher-detail-wrapper p{margin-bottom:15px;}
.publisher-detail-wrapper label{width:70px;display:inline-block;}
.publisher-detail-wrapper label:after{content:":"}
</style>